<!DOCTYPE html>
<html xlmns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="layout/default">
<head>
<meta charset="UTF-8"/>
<title>Your profile</title>
</head>
<body>
	<div class="row" layout:fragment="content">
		<h2 class="indigo-text center" th:text="#{profile.title}">Profile</h2>
		<!-- upload -->
		<div class="row">
			<div class="red-text col s12 center" th:text="${error}" th:if="${error}">Error during upload</div>
			<div class="col m8 s12 offset-m2">
				<img th:src="@{/uploadedPicture}" width="100" height="100"/>
			</div>
			<form th:action="@{/profile}" enctype="multipart/form-data" method="Post" class="col m8 s12 offset-m2">
				<div class="input-field col s6">
					<input type="file" id="file" name="file"/>
				</div>
				<div class="center col s6">
					<button class="btn indigo waves-effect waves-light" type="submit" name="upload" th:text="#{submit}"></button>
				</div>		
			</form>
		</div>
		<!-- profile -->
		<form th:action="@{/profile}" method="post" class="col m8 s12 offset-m2" th:object="${profileForm}">
			<!--/*<ul th:if="${#fields.hasErrors('*')}" class="errorList">
				<li th:each="err:${#fields.errors('*')}" th:text="${err}">Input is incorrect</li>
			</ul>*/-->
			<div class="row">
				<div class="input-field col s6">
					<input id="twitterHandle" type="text" th:field="${profileForm.twitterHandle}" th:errorclass="invalid"/>
					<label for="twitterHandle" th:text="#{twitter.handle}">Last Name</label>
					<div class="red-text" th:errors="*{twitterHandle}">Error</div>
				</div>
				<div class="input-field col s6">
					<input id="email" type="text" th:field="${profileForm.email}" th:errorclass="invalid"/>
					<label for="email" >email</label>
					<div class="red-text" th:errors="*{email}">Error</div>
				</div>
			</div>
			<div class="row">
				<div class="input-field col s6">
					<input id="birthDate" type="text" th:field="${profileForm.birthDate}" th:placeholder="${dateFormat}" th:errorclass="invalid"/>
					<label for="birthDate" th:text="#{birthdate}">birth Date</label>
					<div class="red-text" th:errors="*{birthDate}">Error</div>
				</div>
			</div>
			<fieldset class="row">
				<legend th:text="#{taste.legend}">What do you like?</legend>
				<button class="btn teal" type="submit" name="addTaste" th:text="#{add.taste}">Add Taste
					<i class="mdi-content-add left"></i>
				</button>
				<div th:errors="*{taste}" class="red-text">Error</div>
				<div class="row" th:each="row,rowStat:*{taste}">
					<div class="col s6">
						<input type="text" th:field="*{taste[__${rowStat.index}__]}" th:placeholder="#{taste.placeholder}"/>
					</div>
					<div class="col s6">
						<button class="btn red" type="submit" name="removeTaste" th:value="${rowStat.index}" th:text="#{remove}">Remove<i class="mdi-action-delete right waves-effect"></i></button>
					</div>
				</div>
			</fieldset>
			<div class="row s12">
				<button class="btn waves-effect waves-light" type="submit" name="save" th:text="#{submit}">submit<i class="mdi-content-send right"></i></button>
			</div>
		</form>
	</div>
</body>
</html>